<template>
    <div class="cart-container">
        <!--商品列表-->
        <div class="goods-list" v-for="(item,i) in cartList">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <mt-switch class="switch-cart" v-model="$store.getters.getGoodsSelected[item.id]"
                                   @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"></mt-switch>
                        <img :src="item.img_url">
                        <div class="info">
                            <h1>{{item.title}}</h1>
                            <p>
                                <span class="price">￥{{item.sell_price}}</span>
                                <numboxcart :goodCount="$store.getters.getGoodCount[item.id]" :goodID="item.id"></numboxcart>
                                <!--得到{id:count，。。。。}取值-->
                                <!--再传值给子组件-->
                                <a @click.prevent.stop="remove(item.id,i)">删除</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--结算区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner total">
                    <div class="left">
                        <p>总计（不含运费）</p>
                        <p>已勾选商品 <span class="red">{{$store.getters.getTotal.countTotal}}</span> 件， 总价 <span class="red">￥{{$store.getters.getTotal.priceTotal}}</span></p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import numboxcart from '../comment/numberbox_cart.vue'
export default {
    data(){
        return{
            cartList:[]
        }
    },
    components:{
        numboxcart
    },
    created(){
        this.getCartList();
    },
    //使用localStore里的数据，而不使用数据库，接口设计较为麻烦
    methods:{
        getCartList(){
            //console.log(this.$store.car);
           this.$store.state.car.forEach((item)=>{
               this.$http.get('http://127.0.0.1:3001/getGood?id='+item.id).then((result)=>{
                   if(result.body.code === 0){
                       this.cartList.push(result.body.good) ;
                       console.log(this.cartList)
                   }else{
                       Toast('您的网络抽风了');
                   }
               });
           })
        },
        remove(id,i){
            this.cartList.splice(i,1);
            this.$store.commit("removeGood", id);
        },
        selectedChanged(id,val){
           this.$store.commit('setSelected',{
               id:id,
               val:val,
            })
        }
    }
}
</script>

<style scoped lang="less">
    .cart-container{
        background: white;
        overflow: hidden;

        .mui-card-content-inner{
            display: flex;
            align-items: center;
            .switch-cart{
                padding-left: 0;
                margin-left: 0;
                padding-right: 2px;
            }
            img{
                width: 60px;

            }
            .info{
                margin-left: 10px;
                h1{
                    font-size: 13px;
                }
                p{
                    margin-top: 10px;
                    .price{
                        color: red;
                        font-weight: bold;
                    }
                }
            }
        }
        .total{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .red{
                color: red;
                font-weight: bold;
            }
        }
    }
</style>